<template>
  <div class="namespace-panel-header">
    <el-row class="first-panel-heading">
      <el-col :span="12" class="before" style="padding-bottom: 5px;">
        <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
          <span class="label label-prime namespace-attribute-public">关联</span>
        </el-tooltip>
        <span class="label label-info namespace-attribute-public">properties</span>
      </el-col>
      <el-col :span="12" class="after">
        <span class="label">
          <a>[展开/收缩]</a>
        </span>
      </el-col>
    </el-row>
    <el-row class="second-panel-heading default-panel">
      <el-col :span="16" class="">
        <ul class="nav">
          <li>
            <a>主版本</a>
          </li>
          <li>
            <a class="node-active">灰度版本</a>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {

  }

</script>

<style lang="scss">
  .namespace-panel-header {
    .first-panel-heading {
      .before {
        font-size: 13px;
        .label {
          display: inline;
          padding: .2em .6em .3em;
          font-size: 75%;
          font-weight: bold;
          line-height: 1;
          color: #fff;
          text-align: center;
          white-space: nowrap;
          vertical-align: baseline;
          border-radius: .25em;
          word-wrap: break-word;
          word-break: break-all;
        }
        .label-prime {
          background-color: #337ab7;
        }
        .label-info {
          background-color: #5bc0de;
        }
        .namespace-attribute-public {
          margin-right: 5px;
        }
      }
      .after {
        font-size: 13px;
        text-align: right;
        .label {
          display: inline;
          padding: .2em .6em .3em;
          font-size: 75%;
          font-weight: bold;
          line-height: 1;
          color: #fff;
          text-align: center;
          white-space: nowrap;
          vertical-align: baseline;
          border-radius: .25em;
          word-wrap: break-word;
          word-break: break-all;
        }
        a {
          color: #337ab7;
          text-decoration: none;
          cursor: pointer;
          background-color: transparent;
        }
        a:hover,
        a:focus {
          color: #23527c;
          text-decoration: underline;
        }
        a:focus {
          outline: thin dotted;
          outline: 5px auto -webkit-focus-ring-color;
          outline-offset: -2px;
        }
      }
    }
    .default-panel {
      background-color: white;
      border-color: #eff2f7;
      font-size: 16px;
      font-weight: 300;
      padding: 10px 15px;
      border-bottom: 1px solid transparent;
      border-bottom-color: transparent;
      border-top-right-radius: 3px;
      border-top-left-radius: 3px;
      display: block;
    }
    .second-panel-heading {
      height: 45px;
      .nav {
        margin-bottom: 0;
        padding-left: 0;
        list-style: none;
        border-bottom: 0;
        li {
          float: left;
          margin-bottom: -1px;
          position: relative;
          display: block;
          a {
            cursor: pointer;
            text-decoration: none;
            background-color: transparent;
            height: 35px;
            color: #555;
            font-size: 13px;
            margin-bottom: 2px;
            margin-right: 2px;
            line-height: 1.42857143;
            border: 1px solid transparent;
            border-radius: 4px 4px 0 0;
            position: relative;
            display: block;
            padding: 10px 15px;
            &:hover {
              border-color: #eee #eee #ddd;
            }
            &:hover,
            &:focus {
              text-decoration: none;
              background-color: #eee;
            }
          }
          .node-active{
            border-bottom: 3px #1b6d85 solid;
          }
        }
      }
    }
  }

</style>
